<!DOCTYPE html>
<html ng-app="oppia">
  <head>
    <title>Oppia Admin Panel</title>

    {% include 'header_js_libs.html' %}
    <script>
      var GLOBALS = {};
      GLOBALS.csrf_token = JSON.parse('{{csrf_token|js_string}}');

      var oppia = angular.module('oppia', []);
      oppia.config(function($interpolateProvider) {
        $interpolateProvider.startSymbol('<[');
        $interpolateProvider.endSymbol(']>');
      });

      function Admin($scope, $http) {
        $scope.message = '';

        $scope.reloadExploration = function(explorationId) {
          if ($scope.message == 'Processing...') {
            return;
          }

          $scope.message = 'Processing...';
          var request = $.param({
            csrf_token: GLOBALS.csrf_token,
            payload: JSON.stringify({
              action: 'reload_exploration',
              explorationId: String(explorationId) 
            })
          }, true);

          $http.post(
            '/admin',
            request,
            {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).
          success(function(data) {
              $scope.message = 'Data reloaded successfully. Please remember ' +
                'to flush memcache so that users do not see stale values.';
            }).error(function(errorResponse) {
              $scope.message = 'Server error: ' + errorResponse.error;
            });
        };
      };
    </script>
  </head>

  <body ng-controller="Admin">
    <div>
      Click <a href="/">here</a> to go to the Oppia main page.
    </div>

    <h3>Performance Counters</h3>

    <ul>
      {% for counter in counters %}
        <li>
          {{counter.description}} : {{counter.value}}
        </li>
      {% endfor %}
    </ul>

    <h3>Actions</h3>
    <h4>Reload a single exploration</h4>
    <ul>
      {% for exploration in demo_explorations %}
        <li>
          {{exploration[1]}}
          <button ng-click="reloadExploration({{exploration[0]}})">
            Reload
          </button>
        </li>
      {% endfor %}
    <br><br>
    <[message]>
  </body>
</html>
